<!--
 * @Description: 混凝土订单
 * @Author: wangwangwang
 * @Date: 2020-11-13 14:42:48
 * @LastEditors: wangwangwang
 * @LastEditTime: 2020-11-14 10:44:48
-->
<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main style="display: flex">
        <div>
          <div class="header_right" @click="showCardNav = !showCardNav">
            <div class="title">搜索</div>
            <div>
              <transition name="from"></transition>
              <span v-show="!showCardNav">
                <i style="margin-right: 5px" class="el-icon-arrow-down"></i>
              </span>
              <transition name="to"></transition>
              <span v-show="showCardNav">
                <i style="margin-right: 5px" class="el-icon-arrow-up"></i>
              </span>
            </div>
          </div>
          <div v-show="showCardNav" class="hr"></div>
          <el-collapse-transition>
            <div v-show="showCardNav">
              <div class="search">
                <span style="display: inline-block;margin-bottom: 10px;">
                  <span style="margin-right: 12px">订单编号</span>
                  <el-input v-model="tableParam.orderNo" style="width: 240px" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
                </span>
                <span style="margin-left: 24px">
                  <span style="margin-right: 12px">工程名称</span>
                  <el-input v-model="tableParam.engineeringName" style="width: 240px" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
                </span>
                <span style="margin-left: 24px">
                  <span style="margin-right: 12px">浇筑时间</span>
                  <el-date-picker v-model="tableParam.pouringTime" type="datetime" value-format="yyyy-MM-dd HH" placeholder="请选择"></el-date-picker>
                </span>
                <el-button icon="el-icon-search" size="medium" class="bottom_all" @click="(tableParam.page = 1), gettableData()">查 询</el-button>
                <el-button size="medium" class="bottom_all_two" style="margin-left: 12px" @click="init()">重 置</el-button>
              </div>
            </div>
          </el-collapse-transition>
          <div class="card">
            <div v-loading="tableLoading" class="card_info" :style="style">
              <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange">
                <el-table-column align="center" type="selection"></el-table-column>
                <template v-for="(item, index2) in table">
                  <el-table-column v-if="item.status" :key="index2" :label="item.label" align="center" :width="item.width">
                    <template slot-scope="scope">
                      <el-button v-if="item.label == '运输罐车'" class="bottom_one" size="mini" @click="handleAddTankCar(scope.row)">

                        添加
                      </el-button>
                      <div v-else-if="item.label == '浇筑方式'">
                        <div>{{scope.row.pouringMethod | pouringMethodFilter}}</div>
                      </div>
                      <el-button v-else-if="item.label == '运输详情'" class="bottom_one" size="mini" @click="handleViewTansferDetail(scope.row)">
                        查看
                      </el-button>
                      <span v-else>{{ scope.row[item.prop] }}</span>
                    </template>
                  </el-table-column>
                </template>
              </el-table>
            </div>
            <div class="card_bottom">
              <div class="card_bottom_left">
                <div class="top_page_totle">总共{{ total }}条</div>
                <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" :page-sizes="[10, 20, 30, 40,50,100,200,500,1000]" layout="prev,pager,sizes,next,jumper" :total="total" @size-change="sizeChange" @current-change="gettableData()"></el-pagination>
              </div>
              <div>
                <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="gettableData">刷新</el-button>
              </div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>

    <!-- 添加运输罐车 -->
    <el-dialog v-dialogDrag :visible.sync="addDialog" width="680px" :close-on-click-modal="false" :before-close="resetFromDate">
      <span slot="title" class="dialog-title">添加运输罐车</span>
      <div class="dialoginfo">
        <el-form ref="reffromDate" :inline="true" label-width="110px">
          <el-form-item prop="code">
            <span slot="label" style="color: #ff0000">选择罐车</span>
            <el-select ref="selection3" v-model="selectedRankCarNos" multiple filterable allow-create default-first-option placeholder="请选择">
              <el-option v-for="item in rankCarList" :key="item.plateNumber" :label="item.plateNumber" :value="item.plateNumber"></el-option>
            </el-select>
          </el-form-item>
          <div>
            已选择罐车：
            <div v-for="item in selectedRankCarNos" :key="item">{{item}}</div>
          </div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="resetFromDate">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px" @click="submitFromDate()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog v-dialogDrag :visible.sync="isShowTansferRecord" width="75%" :close-on-click-modal="false" :before-close="resetFromDate">
      <span slot="title" class="dialog-title">查看运输记录</span>
      <div class="dialoginfo">
        <el-row v-if="curRow">
          <el-col :span="8">工程名称：{{curRow.engineeringName}}</el-col>
          <el-col :span="8">订单号：{{curRow.orderNo}}</el-col>
          <el-col :span="8">产品名称：{{curRow.productName}}</el-col>
        </el-row>
      </div>
      <el-table :data="transferList" style="width: 100%">
        <el-table-column prop="structuralParts" label="生产单位"></el-table-column>
        <el-table-column prop="code" label="运输号"></el-table-column>
        <el-table-column prop="carNo" label="车牌号"></el-table-column>
        <el-table-column prop="proTime" label="生产时间"></el-table-column>
        <el-table-column prop="proNum" label="票面量(方)"></el-table-column>
        <el-table-column prop="residueNum" label="余料量(方)"></el-table-column>
        <el-table-column prop="signForNum" label="使用量(方)"></el-table-column>
        <el-table-column prop="transportDistance" label="运输距离"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="resetFromDate">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "@/mixins/ICPSmixin.js";
import { queryPage, WXqueryCarriageList, WXgetTankercarList, queryAllByplanId, saveTankCar } from "@/api/basicConfig/concreteOrder.js";
export default {
  mixins: [mixin],
  data() {
    return {
      queryPage: queryPage,
      table: [
        { label: "订单编号", width: "auto", prop: "orderNo", status: true },
        { label: "产品名称", width: "auto", prop: "productName", status: true },  // 需要分解
        { label: "生产量(方)", width: "auto", prop: "pouringNum", status: true },
        { label: "浇筑时间", width: "auto", prop: "pouringTime", status: true },
        { label: "浇筑方式", width: "auto", prop: "pouringMethod", status: true },
        { label: "工程名称", width: "auto", prop: "engineeringName", status: true },
        { label: "施工单位", width: "auto", prop: "roadwork", status: true },
        { label: "工程地址", width: "150", prop: "place", status: true },
        { label: "联系人", width: "150", prop: "person", status: true },
        { label: "联系电话", width: "150", prop: "phoneNum", status: true },
        { label: "运输罐车", width: "150", prop: "", status: true },
        { label: "运输详情", width: "150", prop: "", status: true },
      ],
      /*列表选中的数据集*/
      tableParam: {
        page: 1,
        pageSize: 10,
        code: "",
        name: "",
      },
      total: 0,
      pagesType: 0,
      fromDate: {
        code: "",
      },
      supplierInfo: null,

      selectedRankCarNos: '',
      rankCarList: [],
      selectedRankCarList: [],
      curRow: null,
      isShowTansferRecord: false,
      transferList: []
    };
  },
  created() {
    this.tableParam = { ...this.tableParam, engineeringName: '', orderNo: '', pouringTime: '' };
    this.gettableData();
  },
  methods: {
    /*重置数据*/
    init() {
      this.gettableData();
    },
    pagessubmitFromDate() {
      let _this = this;
      _this.$refs.reffromDate.validate((valid) => {
        if (valid) {
          _this.submitFromDate();
        } else {
          return false;
        }
      });
    },
    handleAddTankCar(item) {
      this.curRow = item;
      // 获取罐车列表
      WXgetTankercarList({ contractId: item.contractId }).then(res => {
        this.rankCarList = res.data
      });
      // 获取已选罐车列表
      queryAllByplanId({ planId: item.id }).then(res => {
        let cars = []
        res.data.forEach(item => {
          cars.push(item.carNo)
        })
        // this.selectedRankCarList = cars
        this.selectedRankCarNos = cars
      });

      this.selectedRankCarNos = []
      this.addDialog = true;
    },
    submitFromDate() {
      saveTankCar({ planId: this.curRow.id, carNo: this.selectedRankCarNos.join(',') }).then(res => {
        console.log(res)
        this.addDialog = false;
      })
    },
    handleViewTansferDetail(item) {
      this.curRow = item;
      WXqueryCarriageList({ planId: item.id }).then(res => {
        this.transferList = res.data;
      })

      this.isShowTansferRecord = true;
    },
    resetFromDate() {
      this.addDialog = false;
      this.isShowTansferRecord = false;
    },
    sizeChange(value) {
      this.tableParam.pageSize = value;
      this.gettableData();
    },
  },
  filters: {
    pouringMethodFilter(e) {
      if (e) {
        e = JSON.parse(e)
        let table = e.map((res) => res.name)
        let text = table.join('、')
        return text
      }
    },
  }
};
</script>

<style lang="scss" scoped>
.el-input,
.el-select {
  width: 240px;
}
.table_link {
  margin: 0 10px;
  color: $bg_color;
  cursor: pointer;
}

.table_link:hover {
  opacity: 0.8;
}
</style>
